<!-- @format -->
<template>
  <div>
    <h3>我的购物车列表:</h3>
    <ul>
      <li
        v-for="obj in cartList"
        :key="obj.id">
        名称: {{ obj.name }} -> 数量: {{ obj.num }} -> 价格: {{ obj.price }}
      </li>
    </ul>
    <h3>合计:</h3>
    <p>
      <span>总数量: {{ allCount }}</span>
      <span>总数量: {{ allCount }}</span>
      <span>总数量: {{ allCount }}</span>
      <hr/>
      <span>总数量: {{ totalCount() }}</span>
      <span>总数量: {{ totalCount() }}</span>
      <span>总数量: {{ totalCount() }}</span>
    </p>
  </div>
</template>

<script>
  // 计算属性总结：
  // 概念：当一个数据，需要基于其它数据计算才能得到，那么当前这个
  //      数据就应该声明为计算属性
  // 作用：对data中的原始数据做进一步加工(进一步计算)，衍生新的数据来使用
  // 特点：
  //   1. 在computed选项下声明，声明的时候是函数，调用的时候是属性(不能加括号)，
  //      计算属性在vue调试工具中可以看到
  //   2. 计算属性内部必须返回，必须 return 计算结果
  //   3. 计算属性的用法和data中的数据用法完全一致，都可以配合插值或指令使用
  //   4. 当计算属性的依赖发生变化，计算属性会重新计算(会重新执行函数)

  // 计算属性比methods具有的优势：
  // 带缓存
  // 1. 当依赖不变，多次调用同一个计算属性，函数体只会执行一次，并把计算结果进行缓存到内存中
  // 2. 当依赖变了，计算属性会重新执行函数体，把缓存新的结果

  //需求：模拟购物车列表，计算商品总件数和总价格
  // 总件数和总价格是不是需要基于购物车列表计算才能得到？
  export default {
    // 原始数据
    data() {
      return {
        // 购物车列表（模拟后台请求回来的数据）
        cartList: [
          {
            id: 100,
            name: '篮球',
            num: 2,
            price: 200
          },
          {
            id: 200,
            name: '足球',
            num: 1,
            price: 100
          },
          {
            id: 300,
            name: '排球',
            num: 4,
            price: 80
          }
        ]
      }
    },
    // 计算属性(对data中的数据做进一步加工)
    computed: {
      // 总数量
      allCount() {
        console.log('计算属性-allCount')
        return this.cartList.reduce((prev, cur) => prev + cur.num, 0)
      },
       // 总数量
      allPrice() {
        return this.cartList.reduce((prev, {num, price}) => prev + price * num, 0)
      }
    },
    // 方法
    methods: {
      // 总数量
      totalCount() {
        console.log('方法-totalCount')
        return this.cartList.reduce((prev, cur) => prev + cur.num, 0)
      }
    }
  }
</script>

<style>
  div {
    width: 60%;
    margin: 50px auto;
  }
</style>
